<template>
    <div>
        <el-form label-width="80px">
            <el-form-item label="SPU名称">{{ spu.spuName }}</el-form-item>

            <el-form-item label="SKU名称">
                <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
            </el-form-item>

            <el-form-item label="价格(元)">
                <el-input placeholder="价格(元)" type="number" v-model="skuInfo.price"></el-input>
            </el-form-item>

            <el-form-item label="重量(千克)">
                <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
            </el-form-item>

            <el-form-item label="规模描述">
                <el-input type="textarea" row='5' placeholder="规模描述" v-model="skuInfo.skuDesc"></el-input>
            </el-form-item>

            <el-form-item label="平台属性">
                <el-form :inline="true" ref="form" label-width="80px">
                    <el-form-item :label="attr.attrName" v-for="(attr, index) in attrInfoList" :key="attr.id">
                        <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
                            <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`"
                                v-for="(attrValue, index) in attr.attrValueList" :key="attrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>

            <el-form-item label="销售属性">
                <el-form :inline="true" ref="form" label-width="80px">
                    <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr, index) in spuSaleAttrList"
                        :key="saleAttr.id">
                        <el-select placeholder="请选择" v-model="saleAttr.attrIdAndValueId">
                            <el-option :label="saleAttrValue.saleAttrValueName"
                                :value="`${saleAttr.id}:${saleAttrValue.id}}}`"
                                v-for="(saleAttrValue, index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>

            <el-form-item label="图片列表">
                <el-table border style="width: 100%" :data="spuImageList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="80px">
                    </el-table-column>
                    <el-table-column prop="prop" label="图片" width="width">
                        <template slot-scope="{row,$index}">
                            <img :src="row.imgUrl" style="height: 100px;width:100px">
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgName" label="名称" width="width">
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template slot-scope="{row,$index}">
                            <el-button type="primary" v-if="row.isDefault == 0" @click="changeDefault(row)">设置默认
                            </el-button>
                            <el-button>默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
export default {
    name: 'SkuForm',
    data() {
        return {
            spuImageList: [],        //存储图片数据
            spuSaleAttrList: [],     //存储销售属性
            attrInfoList: [],         //存储平台属性的数据
            //收集sku数据的字段
            skuInfo: {
                //第一类收集的数据：父组件给的数据
                category3Id: 0,
                spuId: 0,
                tmId: 0,

                //第二类 需要通过数据双向绑定v-model收集
                skuName: '',
                price: 0,
                weight: '',
                skuDesc: '',
                skuDefaultImg: '',          //默认图片的地址

                //第三类 需要自己书写代码
                skuImageList: [],           //收集图片字段
                skuAttrValueList: [],       //平台属性
                skuSaleAttrValueList: []    //销售属性
            },
            spu: {},
            imageList: [],           //收集图片的数据字段，但是缺少isDefault字段，提交给服务器需要isDefault字段
        };
    },

    methods: {
        //获取SkuForm数据
        async getData(category1Id, category2Id, spu) {

            //收集父组件给予的数据
            this.skuInfo.category3Id = spu.category3Id;
            this.skuInfo.spuId = spu.id;
            this.skuInfo.tmId = spu.tmId;
            this.spu = spu;


            //获取图片数据
            let result = await this.$API.spu.reqSpuImageList(spu.id);
            if (result.code == 200) {
                //从服务器拿到图片数据后给数据加isDefault字段
                let list = result.data;
                list.forEach(item => {
                    
                    item.isDefault = 0;
                });
                this.spuImageList = list;
            }
            //获取销售属性的数据
            let result1 = await this.$API.spu.reqSpuSaleAttrList(spu.id);
            if (result1.code == 200) {
                this.spuSaleAttrList = result1.data;
            }
            //获取平台属性的数据
            let result2 = await this.$API.spu.reqAttrInfoList(category1Id, category2Id, spu.category3Id);
            if (result2.code == 200) {
                this.attrInfoList = result2.data;
            }
        },

        //table表格复选框按钮事件
        handleSelectionChange(params) {
            this.imageList = params;
        },

        changeDefault(row) {
            //先让所有数据的isDefault变为0
            this.spuImageList.forEach(item => {
                item.isDefault = 0;
            })
            //再让被点击的那个数据isDefault变为1
            row.isDefault = 1;
            //收集默认图片的地址
            this.skuInfo.skuDefaultImg = row.imgUrl;
        },
        //取消按钮
        cancel() {
            //自定义事件，让父组件切换场景
            this.$emit('changeScenes', 0);
            //清除数据
            Object.assign(this._data, this, $options.data());
        },
        //保存按钮
        async save() {
            //整理参数
            const { imageList, spuSaleAttrList, attrInfoList, skuInfo } = this
            //整理平台属性数据
            skuInfo.skuAttrValueList = attrInfoList.reduce((prev, item) => {
                //将之前收集的销售属性整理到skuInfo的skuSaleAttrValueList中
                if (item.attrIdAndValueId) {
                    const [attrId, valueId] = item.attrIdAndValueId.split(':')
                    prev.push({ attrId, valueId })
                }
                return prev;
            }, [])
            //整理销售属性
            //reduce累加,prev累加值
            skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((prev, item) => {
                //将之前收集的销售属性整理到skuInfo的skuSaleAttrValueList中
                if (item.attrIdAndValueId) {
                    const [saleAttrId, saleAttrValueId] = item.attrIdAndValueId.split(':')
                    prev.push({ saleAttrId, saleAttrValueId })
                }
                return prev;
            }, [])
            //整理图片数据
            skuInfo.skuImageList = imageList.map(item => {
                return {
                    imgName: item.imgName,
                    imgUrl: item.imgUrl,
                    isDefault: item.isDefault,
                    spuImgId: item.id,
                }
            })
            //发请求
            let result = await this.$API.spu.reqAddSku(skuInfo);
            console.log(result);
            if (result.code == 200) {
                this.$message({
                    message: '保存成功',
                    type: 'success'
                })
                this.$emit('changeScenes', 0)
            }
            //清除数据
            Object.assign(this._data, this, $options.data());

        }

    }
};
</script>

<style lang="scss" scoped>

</style>